<template>
  <div>
    <div class="top-box">
      <addForm :sup-this="supThis" />
      <importOrigin :sup-this="supThis" />
      <distribute :sup-this="supThis" />
      <!-- <el-button type="warning" size="mini" @click="download('new')">下载订单 </el-button>
      <el-button type="warning" size="mini" @click="downloadDistributed()">已分配订单</el-button> -->
    </div>

    <!-- 订单列表 & 查询框 -->
    <div class="user pd orderlist app-container">
      <eHeader :query="query" :sup-this="supThis" />

      <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
        <el-tab-pane label="未分配" name="initial">
          <span slot="label"><el-badge :value="initialDataLength" class="cus-badge">未分配</el-badge></span>
          <originTable :origin-data="data" :status-list="statusList" :loading="loading" :show-checkbox="true" @change="channelOriginIds" />
        </el-tab-pane>
        <el-tab-pane label="已分配" name="pass">
          <span slot="label"><el-badge :value="passDataLength" class="cus-badge">已分配</el-badge></span>
          <originTable :origin-data="data" :status-list="statusList" :loading="loading" />
        </el-tab-pane>
        <el-tab-pane label="全部" name="all">
          <span slot="label"><el-badge :value="tableDataLength" class="cus-badge">全部</el-badge></span>
          <originTable :origin-data="data" :status-list="statusList" :loading="loading" />
        </el-tab-pane>
      </el-tabs>
      <div class="empty-10" />
      <div class="pagination-container">
        <el-pagination 
          :total="total"
          :current-page.sync="tableQuery.page"
          :page-sizes="[10, 20, 50]"
          :page-size="tableQuery.limit"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="sizeChange" 
          @current-change="pageChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import checkPermission from '@/utils/permission'
import initData from '@/mixins/initData'
import load from '@/views/components/loading1'
import originTable from './module/originTable'
import eHeader from './module/header'
import edit from './module/edit'
import addForm from './module/addForm'
import distribute from './module/distribute'
import importOrigin from './module/importOrigin'

export default {
  components: {
    load, originTable, eHeader, edit, distribute, importOrigin, addForm
  },
  mixins: [initData],
  data() {
    return {
      supThis: this,
      statusList: {},
      datePicker: [],
      query: {
        status: 'initial'
      },
      originIds: [],
      skuGoodsInfos: [],
      goodsInfoPrices: [],
      sources: [],
      froms: [],
      tableData: [],
      initialData: [],
      passData: [],
      initialDataLength: 0,
      passDataLength: 0,
      tableDataLength: 0,
      activeName: 'initial',
      distributeVisible: false,
      teams: [],
      principals: [],
      principal: null,
      team: null,
      tableLoading: true,
      loading: true,
      formTitle: null,
      formVisible: false,
      importFormVisible: false,
      formSubmiting: false,
      total: null,
      tableQuery: {
        limit: 20,
        page: 1,
        status: null,
        start_time: null,
        end_time: null,
        source: null,
        goods_title: null,
        sku_type: null,
        goods_info: null,
        price: null,
        external_procure_number: null,
        consignee: null,
        phone: null
      },
      
      importForm: {
        channel_code: null,
        file: ''
      },
      multipleSelection: [],
      orderTypes: [],
      order_type: null,
      secondChannels: [],
      channel_codes: [],
    }
  },
  created() {
    this.initParam()
    this.loading = false
    this.tableQuery.status = 'initial'
    this.getOrderNumber()
    this.getSecondChannels()
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    checkPermission,
    beforeInit() {
      this.url = '/admin/v1/origin'
      const sort = 'id,desc'
      this.params = { page: this.page, limit: this.limit, sort: sort, type: this.checkedTypes, status: this.checkedStatus }
      const query = this.query
      console.log(query)
      for (const k in query) {
        console.log(query)
        if (query[k]) { this.params[k] = query[k] }
      }

      //重新查询数量
      this.getOrderNumber(this.params)
      
      return true
    },
    initParam() {
      this.$api.order.origin
        .params({
          params: { keys: ['statuses'] }
        })
        .then(res => {
          this.statusList = res.data.statuses
        }).catch(err => {
          console.log(err)
        })
    },
    getSecondChannels() {
      //查询渠道信息
      this.$api.enterprise.channel
        .cascadeSecond({
          params: { status: 1 }
        })
        .then(res => {
          this.secondChannels = res.data.channels
        }).catch(err => {
          console.log(err)
        })
    },
    getOrderNumber(param) {
      this.$api.order.origin
        .getOriginNumber({
          params: param
        }).then(res => {
          this.initialDataLength = res.data.initial
          this.passDataLength = res.data.pass
          this.tableDataLength = res.data.all
        }).catch(err => {
          console.log(err)
        })
    },
    channelOriginIds(value) {
      this.originIds = value
    },
    handleClick(tab) {
      if (this.activeName === 'all') {
        this.query.status = null
      } else {
        this.query.status = this.activeName
      }
      this.init()
    },
    showDialog() {
      this.team = null
      this.principal = null
      this.distributeVisible = true
    },
    deleted(id) {
    //   let _this = this
    //   let params = { id: id }
    //   this.$confirm('确认取消该订单？')
    //     .then(_ => {
    //       // api.GET(apiConfig.shopmanage.originOrder.deleted, params, res => {
    //       //   _this.getList()
    //       //   _this.$notify({ title: '提示', message: '数据状态修改成功', type: 'success', duration: 1500 })
    //       // }, res => {
    //       //   _this.$notify({ title: '错误', message: res.msg, type: 'error', duration: 1500 })
    //       //   _this.tableLoading = false
    //       // })
    //     })
    //     .catch(_ => {
    //       _this.$message('该操作取消')
    //     })
    },
    refunded(id) {
      // let _this = this
      // let params = { id: id }
      // this.$confirm('确认将该订单退款？')
      //   .then(_ => {
      //     // api.GET(apiConfig.shopmanage.originOrder.refunded, params, res => {
      //     //   _this.$notify({ title: '提示', message: '数据状态修改成功', type: 'success', duration: 1500 })
      //     //   _this.getList()
      //     // }, res => {
      //     //   _this.$notify({ title: '错误', message: res.msg, type: 'error', duration: 1500 })
      //     //   _this.tableLoading = false
      //     // })
      //   })
      //   .catch(_ => {
      //     _this.$message('退款操作取消')
      //   })
    },
    thirdPaty(id) {
      // let _this = this
      // let params = { id: id }
      // this.$confirm('确认将该订单复购同步到服务订单？')
      //   .then(_ => {
      //     // api.GET(apiConfig.shopmanage.originOrder.thirdParty, params, res => {
      //     //   _this.$notify({ title: '提示', message: '订单同步成功', type: 'success', duration: 1500 })
      //     //   _this.getList()
      //     // }, res => {
      //     //   _this.$notify({ title: '错误', message: res.msg, type: 'error', duration: 1500 })
      //     //   _this.tableLoading = false
      //     // })
      //   })
      //   .catch(_ => {
      //     _this.$message('复购同步操作取消')
      //   })
    },
    pass(id) {
      // let _this = this
      // let params = { id: id }
      // this.$confirm('确认将该订单同步到服务订单？')
      //   .then(_ => {
      //     // api.GET(apiConfig.shopmanage.originOrder.pass, params, res => {
      //     //   _this.$notify({ title: '提示', message: '订单同步成功', type: 'success', duration: 1500 })
      //     //   _this.getList()
      //     // }, res => {
      //     //   _this.$notify({ title: '错误', message: res.msg, type: 'error', duration: 1500 })
      //     //   _this.tableLoading = false
      //     // })
      //   })
      //   .catch(_ => {
      //     _this.$message('订单同步操作取消')
      //   })
    },
    changeAttribute(val, id, attribute) {
      const _this = this
      _this.tableLoading = true
      const params = {
        id: id,
        attribute: attribute,
        value: val
      }
      // api.GET(apiConfig.shopmanage.originOrder.changeAttribute, params, res => {
      //   _this.$notify({ title: '提示', message: '数据修改成功', type: 'success', duration: 1500 })
      //   _this.getList()
      // }, res => {
      //   _this.$notify({ title: '错误', message: res.msg, type: 'error', duration: 1500 })
      //   _this.tableLoading = false
      // })
    },
    download(type) {
      // const paramjson = JSON.stringify({ type: type })
      // const params = crypt.encrypt(paramjson)
      // window.open(config.domain + apiConfig.shopmanage.originOrder.download + '?param=' + params)
    },
    downloadDistributed() {
      // const obj = {
      //   start: formatdate(this.tableQuery.start_time),
      //   end: formatdate(this.tableQuery.end_time)
      // }
      // if (!obj.start || !obj.end) return
      // let paramjson = JSON.stringify(obj)
      // let params = crypt.encrypt(paramjson)
      // window.open(config.domain + apiConfig.shopmanage.originOrder.downloadDistributed + '?param=' + params)
    },
    getfile(event) {
      // this.importForm.file = event.target.files[0]
      // var filename = event.target.files[0].name
      // var fileArry = filename.split('.')
      // var fileLen = fileArry.length
      // var suffix = fileArry[fileLen - 1]
      // if (suffix === 'csv' || suffix === 'xls' || suffix === 'xlsx' || suffix === 'xlsm') {
      //   return false
      // } else {
      //   this.$notify({ title: '错误', message: '上传的文档不合格', type: 'error', duration: 1500 })
      // }
    },
    importReset() {
      this.importForm = {
        source: null,
        sku_type: null,
        goods_info: null,
        price: null,
        file: null
      }
    }
  }
}
</script>

<style>
#files {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  filter: alpha(opacity=0);
}
.list-type .list-total {
  right: -15px
}
.el-row-select {
  margin-bottom: 20px;
}

.cus-badge .el-badge__content.is-fixed {
  margin-top:9px;
  right: 3px;
}
</style>
